<!DOCTYPE html>
<html lang="zh-cn">
<?php
session_start();
?>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>板块列表 - 什么都论</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f4f6f9;
        }

        .header {
            position: sticky;
            height: 70px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 30px;
            top: 0;
            background-color: #fff;
            box-shadow: #ccc 0px 5px 20px 0px;
        }

        .logo img {
            width: 180px;
        }

        .options {
            display: flex;
            list-style: none;
        }

        .options li {
            margin-right: 20px;
            padding: 10px;
            border-radius: 5px;
            font-size: 18px;
            color: #0327b3;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
        }

        .options li:hover {
            color: #fff;
            background-color: #2A4DD0;
        }

        .options li a {
            color: inherit;
            text-decoration: none;
        }

        .li-user {
            display: flex;
            align-items: center;
            position: relative;
        }

        .li-user .user-image {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .li-user .username {
            max-width: 100px;
            overflow-x: hidden;
            text-overflow: ellipsis;
        }

        .logout {
            position: absolute;
            top: 50px;
            left: 0;
            width: 100%;
            display: none;
        }

        .li-user:hover .logout {
            display: block;
        }

        .logout button {
            width: 100%;
            height: 40px;
            background: red;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            color: #fff;
            font-size: 16px;
        }

        .main-container {
            display: flex;
            max-width: 1200px;
            margin: 30px auto;
            gap: 30px;
        }

        .main {
            flex: 3;
            background: #fff;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        .sidebar {
            flex: 1;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
            position: sticky;
            top: 80px;
            height: fit-content;
        }

        .board-list {
            display: flex;
            flex-wrap: wrap;
            gap: 24px;
        }

        .board-card {
            flex: 1 1 220px;
            min-width: 220px;
            max-width: 300px;
            background: #f8fafc;
            border-radius: 8px;
            padding: 18px 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
            transition: box-shadow 0.2s;
            cursor: pointer;
        }

        .board-card:hover {
            box-shadow: 0 6px 24px rgba(42, 77, 208, 0.10);
            background: #f0f4ff;
        }

        .board-title {
            font-size: 20px;
            font-weight: bold;
            color: #2A4DD0;
            margin-bottom: 8px;
        }

        .board-desc {
            color: #666;
            font-size: 15px;
            margin-bottom: 10px;
        }

        .board-meta {
            font-size: 13px;
            color: #999;
        }

        .sidebar-card {
            margin-bottom: 24px;
        }

        .sidebar-card .card-title {
            font-weight: bold;
            margin-bottom: 12px;
            font-size: 16px;
        }
    </style>
    <style>
        .page-title {
            font-size: 26px;
        }

        .search-box {
            display: flex;
            max-width: 600px;
            margin: 30px auto;
            position: relative;
        }

        .search-input {
            flex: 1;
            padding: 14px 20px;
            border: 2px solid #ddd;
            border-radius: 50px 0 0 50px;
            font-size: 16px;
            outline: none;
            transition: all 0.3s ease;
        }

        .search-input:focus {
            border-color: #2A4DD0;
        }

        .search-btn {
            padding: 14px 30px;
            background: #2A4DD0;
            color: #FFF4A3;
            border: none;
            border-radius: 0 50px 50px 0;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .search-btn:hover {
            background: #041F9A;
        }

        .filter-container {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
        }

        .filter-btn {
            padding: 10px 20px;
            margin: 0 10px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 30px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .filter-btn.active,
        .filter-btn:hover {
            background: #2A4DD0;
            color: #FFF4A3;
            border-color: #2A4DD0;
            font-weight: 500;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="logo">
            <img src="../image/logo.png" alt="logo">
        </div>
        <ul class="options">
            <li><a href="./index.php">论坛首页</a></li>
            <li><a href="./list.php">板块</a></li>
            <li><a href="./me.php">我的信息</a></li>
            <li class="li-user">
                <img src="<?php echo isset($_SESSION['head']) ? '../image/head/' . $_SESSION['head'] : '../image/head/Default1.jpg'; ?>"
                    alt="user" class="user-image" onerror="this.onerror=null;this.src='../image/head/Default.jpg';">
                <?php
                if (isset($_SESSION['username'])) {
                    echo "<span class='username'>" . $_SESSION['username'] . "</span>";
                    echo <<<EOF
                    <div class="logout">
                        <button><a href="../control/doLogin.php?action=logout" style="color:#fff;text-decoration:none;" onclick="return confirm('确认退出登录吗？')">退出登录</a></button>
                    </div>
EOF;
                } else {
                    echo "<a href='login.php'>登录</a>";
                }
                ?>
            </li>
        </ul>
    </div>
    <div class="main-container">
        <div class="main">
            <h1 class="page-title">论坛版块分类</h1>

            <div class="search-box">
                <input type="text" class="search-input" placeholder="搜索版块...">
                <button class="search-btn">搜索</button>
            </div>

            <div class="filter-container">
                <button class="filter-btn active">全部版块</button>
                <button class="filter-btn">热门版块</button>
                <button class="filter-btn">新晋版块</button>
                <button class="filter-btn">兴趣分类</button>
            </div>
            <div class="board-list">
                <?php
                require '../model/boardDao.php';
                $boards = get_all_boards();
                foreach ($boards as $board) {
                    $id = $board['boardid'];
                    $name = htmlspecialchars($board['boardName']);
                    $desc = htmlspecialchars($board['description'] ?? '暂无简介');
                    // $topicCount = $board['topicCount'] ?? 0;
                    $topicCount = count_topics_by_board($id) ?? 0;
                    echo <<<EOF
                    <div class="board-card">
                        <div class="board-title">$name</div>
                        <div class="board-desc">$desc</div>
                        <div class="board-meta">主题数：$topicCount</div>
                    </div>
EOF;
                }
                ?>
            </div>
        </div>

    </div>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 筛选按钮切换
        const filterBtns = document.querySelectorAll('.filter-btn');
        filterBtns.forEach(btn => {
            btn.addEventListener('click', function () {
                filterBtns.forEach(b => b.classList.remove('active'));
                this.classList.add('active');
            });
        });

        // 搜索功能
        const searchInput = document.querySelector('.search-input');
        const searchBtn = document.querySelector('.search-btn');
        const cards = document.querySelectorAll('.board-card');

        searchBtn.addEventListener('click', function () {
            const searchTerm = searchInput.value.trim().toLowerCase();
            if (searchTerm) {
                cards.forEach(card => {
                    const boardName = card.querySelector('.board-title').textContent.toLowerCase();
                    if (boardName.includes(searchTerm)) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            } else {
                // 如果搜索框为空，显示所有
                cards.forEach(card => {
                    card.style.display = 'block';
                });
            }
        });

        searchInput.addEventListener('keyup', function (e) {
            if (e.key === 'Enter') {
                searchBtn.click();
            }
            if (this.value === '') {
                cards.forEach(card => {
                    card.style.display = 'block';
                });
            }
        });
    });
</script>

</html>